<template>
    <el-dialog title="打印" :visible.sync="isprintOpen" width="50%" append-to-body :before-close="closeDelDialog">
        <div style="margin-left:20px;">
                <el-button type="danger" plain size="medium" @click="printTap">打印</el-button>
                <el-button @click="closeDelDialog">取 消</el-button>
            </div>
        <el-row class="margin-tp custom-table" ref="exportPdf">
  

      

            <el-col :span="24" class="transf-title" style="margin-bottom:20px">电子档案移交与接收登记单</el-col>
        <table border="1" cellpadding="0" cellspacing="0" class="orderBorder">
            <tr>
                <td style="width:200px">交接工作名称</td>
                <td colspan="3">{{ form.title }}</td>
            </tr>
            <tr>
                <td>内容描述</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>移交电子档案数量</td>
                <td style="width:80px;">{{ form.entriesNum }}</td>
                <td>移交数据量</td>
                <td style="width:180px;">{{ form.operationsNum }}</td>
            </tr>
            <tr>
                <td>载体起止顺序导</td>
                <td></td>
                <td>移交载体类 型、规格</td>
                <td>
                    <span v-for="(i, idx) in dict.type.JZ" :key="idx">
                        {{form.medium  == i.value ? i.label : '' }}
                    </span>
                </td>
            </tr>

            <tr>
                <td rowspan="2">检验内容</td>
                <td colspan="3">单位名称</td>
            </tr>
            <tr>
                <td colspan="2">移交单位: {{ form.transferName }}</td>
                <td>接收单位:</td>
            </tr>

            <tr>
                <td>准确性检验</td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td>完整性检验</td>
                <td colspan="2"></td>
                <td></td>
            </tr>

            <tr>
                <td>可用性检验</td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td>安全性检验</td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td>载体外观检验</td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2">填表人(签名)</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="ymd">
                        <el-input  placeholder="" type="number"
                            oninput="if(value.length>4)value=value.slice(0,4)"
                            ></el-input>年<el-input
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                           ></el-input>月<el-input 
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                            ></el-input>日
                    </div>
                </td>
                <td>
                    <div class="ymd">
                        <el-input  placeholder="" type="number"
                            oninput="if(value.length>4)value=value.slice(0,4)"
                           ></el-input>年<el-input
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                            ></el-input>月<el-input 
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                           ></el-input>日
                    </div>
                </td>
            </tr>
            <tr>
                <td rowspan="2">审核人(签名)</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="ymd">
                        <el-input  placeholder="" type="number"
                            oninput="if(value.length>4)value=value.slice(0,4)"
                            ></el-input>年<el-input
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                           ></el-input>月<el-input 
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                           ></el-input>日
                    </div>
                </td>
                <td>
                    <div class="ymd">
                        <el-input  placeholder="" type="number"
                            oninput="if(value.length>4)value=value.slice(0,4)"
                            ></el-input>年<el-input
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                           ></el-input>月<el-input 
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                            ></el-input>日
                    </div>
                </td>
            </tr>
            <tr>
                <td rowspan="2">单位(印幸)</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="ymd">
                        <el-input  placeholder="" type="number"
                            oninput="if(value.length>4)value=value.slice(0,4)"
                           ></el-input>年<el-input
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                           ></el-input>月<el-input 
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                            ></el-input>日
                    </div>
                </td>
                <td>
                    <div class="ymd">
                        <el-input  placeholder="" type="number"
                            oninput="if(value.length>4)value=value.slice(0,4)"
                            ></el-input>年<el-input
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                            ></el-input>月<el-input 
                            placeholder="" type="number" oninput="if(value.length>2)value=value.slice(0,2)"
                           ></el-input>日
                    </div>
                </td>
            </tr>
        </table>
        </el-row>
    </el-dialog>
</template>
<script>
import { archiveEnrollDetile } from "@/api/archive/digitalizeReceive/archiveLoginRecord.js"
export default {
    props: ['isprintOpen','ids'],
    archive_Dicts: ['JZ'],
    data() {
        return {
            form:""
        }
    },
    watch:{
        ids:{
            handler(val){
                console.log(val,"ksldjflksdjfsldfjklj")
                archiveEnrollDetile(val).then(res=>{
                    console.log(res,"-----------------------")
                    this.form=res.data;
                })
            },
            immediate: true
        }
    },
    methods: {
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },
                //打印
                printTap() {
            const tableElement = document.querySelector('.custom-table');
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            const iframeDoc = iframe.contentWindow.document;

            //解决input输入框没有值的问题，需要引入jQuery

            // if(this.form.type=="outLine"){
            //     $("input[name = outLine]").attr("checked",true)
            // }else{
            //     $("input[name = onLine]").attr("checked",true)
            // }
            // const input = $('input');
            // input.each(function () {
            //     $(this).attr('value', $(this).val());
            // });
            //exportPdf为需要打印的div部分
            //获取到要打印的节点内容
            //   window.document.body.innerHTML = tableElement.innerHTML;//把打印内容赋值给页面内容
            // window.print();//调用打印方法
            // window.location.reload();//打印之后页面重新加载

            iframeDoc.write(`
          <html>
          <head>
            <style>
              @media print {

            /* 表格边框 */
            table {
            border-collapse: collapse;
            border: 1px solid black;
            }
            /* 表格内容边框 */
            td, th {
            text-align: center; /* 设置单元格文本居中 */
            height: 42px;
            line-height: 42px;
            border: rgb(42, 41, 41) 1px solid;
            padding:0 10px;
            font-size:12px
            }
                .custom-table {
                  width: 100%; /* 设置表格宽度为100% */
                  border-collapse: collapse; /* 合并单元格边框 */
                }
                .custom-cell {
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:flex-start;
                  opacity:1;
                  color:#000000;
                  letter-spacing:2px;
                  font-family:仿宋;
                  font-size:16px;
                  border: 1px solid #000; /* 设置单元格边框样式 */
                  padding: 8px; /* 设置单元格内边距 */
                  text-align: center; /* 设置单元格文本居中 */
                }
                .title {
                  heigth: 5em;
                  line-height: 5em;
                  text-align: center;
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:center;
                  letter-spacing:4px;
                  font-weight:bold;
                  font-family:宋体;
                  font-size:24px;
                  opacity:1;
                }
              }
              .transf-title {
                    text-align: center;
                    line-height: 55px;
                    font-weight: bold;
                    font-size: 28px;
                }
             .orderBorder {
                width:100%;
                margin: 0px auto;
            }
            .orderBorder input{
                width:100%
            }
            .ymd {
                padding: 0;
                margin: 0;
                display: flex;
                width: 80%;
                text-align: right;
                align-items: center;
            }
            .pinput {
                display: flex;
                flex-direction: row;
                line-height: 42px;
                align-items: center;
            }
            .el-checkbox{
                display: flex;
                flex-direction: row;
                line-height: 42px;
                align-items: center;
            }
            .el-checkbox .el-checkbox__label{
                margin-left:10px
            }

            .orderBorder input {
                height:30px;
                 border:0!important;

                }
                 .textNSME input {
                        text-align: right !important;
                    }

                input::-webkit-outer-spin-button,
                 input::-webkit-inner-spin-button {
                    -webkit-appearance: none !important;
                }

              input[type="number"] {
                    -moz-appearance: textfield;
                }

                .margin-input{
                    padding-top:10px
                }

            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
            iframeDoc.close();
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 0 20px 30px !important;
}

.steps-action {
    margin-top: 24px;
}

.printMain {
    display: flex;
    flex-direction: row;
}

::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}



.orderBorder {
    width: 80%;
    margin: 0px auto;
}

.orderBorder td {
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: rgb(42, 41, 41) 1px solid;
}

.transbz {
    width: 60%;
    margin: 0 auto;
}

::v-deep .orderBorder input {
    border: 0 !important;
    width: 100%
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
    -moz-appearance: textfield;
}

.transf-title {
    text-align: center;
    line-height: 55px;
    font-weight: bold;
    font-size: 28px;
}

.ymd {
    padding: 0;
    margin: 0;
    display: flex;
    width: 80%!important;
    text-align: center;
}

::v-deep .textNSME input {
    text-align: right !important;
}

.pinput {
    display: flex;
    flex-direction: row;
    line-height: 42px;
    align-items: center;
}

table td>div {
    width: -webkit-fill-available !important;
}

.print_title {
    text-align: center;
    line-height: 40px;
}

</style>